<template>
    <div>
        <div>

            <br/> <br/>
            <p style="font-size: 30px">修改个人信息</p>
            <br/> <br/>


            <el-col :offset="5">
                <el-col :span="2">
                    <p>用户昵称</p>
                </el-col>
                <el-col :span="10">
                    <el-input  v-model="name" />
                </el-col>
            </el-col>

            <br/><br/><br/>

            <el-col :offset="5">
                <el-col :span="2">
                    <p>用户生日</p>
                </el-col>
                <el-col :span="10">
                    <el-date-picker type="date" placeholder="选择日期" v-model="birthday" style="width: 100%;"/>
                </el-col>
            </el-col>

            <br/><br/><br/>

            <el-col :offset="5">
                <el-col :span="2">
                    <p>用户邮箱</p>
                </el-col>
                <el-col :span="10">
                    <el-input  v-model="email" />
                </el-col>
            </el-col>

            <br/><br/><br/>

            <el-col :offset="5">
                <el-col :span="2">
                    <p>个性签名</p>
                </el-col>
                <el-col :span="10">
                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="showMsg"
                            maxlength="100"
                            show-word-limit
                    />
                </el-col>
            </el-col>


            <br/><br/><br/><br/><br/><br/>


            <el-col :offset="10">
                <el-col :span="2" >
                    <el-button @click="update" type="success">更新</el-button>
                </el-col>
                <el-col :span="2" >
                    <el-button @click="cancel" type="info">取消</el-button>
                </el-col>
            </el-col>




        </div>
    </div>
</template>

<script>
    import {formateDate} from '../js/date'
    export default {
        name: "updateMsg",
        created: function f() {
            this.$axios
                .get('/api/user/getAllMsg')
                .then((req)=>{
                    var tmp = req.data.data;
                    this.name = tmp.name;
                    this.phone = tmp.phone;
                    this.birthday = tmp.birthday;
                    this.showMsg = tmp.showMsg;
                    this.email = tmp.email;
                    this.id = tmp.id;
                })
        },
        data() {
            return {
                name: '',
                birthday:'2000-01-01',
                email: '',
                showMsg: '',
                id: '',
                type: [],
                resource: '',
                desc: ''
            }
        },
        methods:{
            update:function () {
                let data = {
                    "name":this.name,
                    "birthday":this.birthday,
                    "showMsg":this.showMsg,
                    "email":this.email,
                    'id':this.id
                };
                this.$axios
                    .post("/api/user/update", data)
                    .then((req)=>{
                        this.$message.success("更新成功");
                        location.reload();
                    })
            },
            cancel:function () {
                location.reload();
            }
        }
    }
</script>

<style scoped>

</style>
